import React, { Component } from 'react';
import { Grid, Icon } from '@icedesign/base';
import IceContainer from '@icedesign/container';
import CountUp from 'react-countup';
import AreaChart from './AreaChart';
import axios from 'axios';
import cookie from 'react-cookies';


const { Row, Col } = Grid;

export default class OverviewChart extends Component {
  static displayName = 'OverviewChart';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      department: [],
      all: 0,
      session: '',
      gaoxiao: '',
      qiye: '',

    };
  }

  componentWillMount() {
    const sessionid = cookie.load('sessionId');
    const dateurl = 'http://39.105.21.199:8989/IPEvaluation/evaluateManage/countEvaluateNumByDate.do?sessionId='
    axios.post(dateurl + sessionid).then((response) => {
      console.log('over', response.data);
      const msg = response.data.msg;
      if (msg === 'LoginInvalidate') {
        this.props.history.push('/pagelogin');
      }
      const message = response.data.data;
      const datearray = message.split(',');
      console.log(datearray);
      for (let i = 0; i < datearray.length; i++) {
        if (i === 0) {
          const array = datearray[i].split('=');
          const datenum = array[0];
          const num = array[1];
          this.setState({ all: num });
        }
        if (i === 1) {
          const array = datearray[i].split('=');
          const datenum = array[0];
          const num = array[1];
          this.setState({ qiye: num });
        }
        if (i === 2) {
          const array = datearray[i].split('=');
          const datenum = array[0];
          const num = array[1];
          this.setState({ gaoxiao: num });
          console.log('123', this.state.gaoxiao);
        }
      }
    }).catch((error) => {
      console.log(error);
    });
  }

  render() {
    return (
      <IceContainer title="知识产权评价分析">
        <Row type="wrap">
          <Col xxs="12" s="12" l="6">
            <div style={styles.box}>
              <h2 style={styles.counterNum}>
                <CountUp start={0} end={this.state.qiye} duration={3} useEasing />{' '}
                <Icon
                  size="xs"
                  type="arrow-up-filling"
                  style={{ ...styles.arrowIcon, ...styles.arrowUp }}
                />
              </h2>
              <p style={styles.textLabel}>企业评价数</p>
            </div>
          </Col>
          <Col xxs="12" s="12" l="6">
            <div style={styles.box}>
              <h2 style={styles.counterNum}>
                <CountUp start={0} end={this.state.gaoxiao} duration={3} useEasing />{' '}
                <Icon
                  size="xs"
                  type="arrow-up-filling"
                  style={{ ...styles.arrowIcon, ...styles.arrowUp }}
                />
              </h2>
              <p style={styles.textLabel}>高校评价数</p>
            </div>
          </Col>
          <Col xxs="12" s="12" l="6">
            <div style={styles.box}>
              <h2 style={styles.counterNum}>
                <CountUp start={0} end={this.state.all} duration={3} useEasing />{' '}
                <Icon
                  size="xs"
                  type="arrow-up-filling"
                  style={{ ...styles.arrowIcon, ...styles.arrowUp }}
                />
              </h2>
              <p style={styles.textLabel}>总评价数</p>
            </div>
          </Col>
        </Row>
        <AreaChart />
      </IceContainer>
    );
  }
}

const styles = {
  box: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: '10px',
  },
  textLabel: {
    margin: 0,
    color: '#666',
  },
  counterNum: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px',
    fontSize: '28px',
  },
  arrowIcon: {
    marginLeft: '10px',
  },
  arrowUp: {
    color: '#ec3f16',
  },
  arrowDown: {
    color: 'green',
  },
};
